<template>
    <div class="a-tree">
        <template v-for="(a, i) in props.items" :key="props.getKeyFunc(a)">
            <template v-if="props.getIsFolderFunc(a)">
                <slot name="foldName" :item="a" :parent="props.parent" :depth="props.depth" :index="i" :itemCount="props.items.length" :opened="props.getIsItemOpenedFunc(a)"></slot>
                <Transition>
                    <a-tree :items="props.getItemsFunc(a)" :getItemsFunc="props.getItemsFunc" :parent="a" :getKeyFunc="props.getKeyFunc" :getIsFolderFunc="props.getIsFolderFunc" :getIsItemOpenedFunc="props.getIsItemOpenedFunc" :depth="props.depth + 1" v-if="props.getIsItemOpenedFunc(a)">
                        <template v-slot:foldName="{ item, parent, depth, index, itemCount, opened }: any">
                            <slot name="foldName" :item="item" :parent="parent" :depth="depth" :index="index" :itemCount="itemCount" :opened="opened"></slot>
                        </template>
                        <template v-slot:file="{ item, parent, depth, index, itemCount }: any">
                            <slot name="file" :item="item" :parent="parent" :depth="depth" :index="index" :itemCount="itemCount"></slot>
                        </template>
                    </a-tree>
                </Transition>
            </template>
            <template v-else>
                <slot name="file" :item="a" :parent="props.parent" :depth="props.depth" :index="i" :itemCount="props.items.length"></slot>
            </template>
        </template>
    </div>
</template>

<style lang="scss" scoped>
.a-tree {

    &.v-enter-active,
    &.v-leave-active {
        transition: transform 300ms, opacity 300ms;
    }

    &.v-enter-from {
        transform: translateX(-100%);
        opacity: 0;
    }

    &.v-leave-to {
        transform: translateX(100%);
        opacity: 0;
    }
}
</style>

<script setup lang="ts">
import { KeyType } from '@/types'

interface PropsType {
    items?: any[]
    getItemsFunc?: (a: any) => any[]
    parent?: any
    getKeyFunc?: (a: any) => KeyType
    getIsFolderFunc?: (a: any) => boolean
    getIsItemOpenedFunc?: (a: any) => boolean
    depth?: number
}
const props = withDefaults(defineProps<PropsType>(), {
    items: () => [],
    getItemsFunc: (a: any) => a.items,
    parent: undefined,
    getKeyFunc: (a: any) => a.id,
    getIsFolderFunc: (a: any) => a.type === 0,
    getIsItemOpenedFunc: (a: any) => a.on === true,
    depth: 0
})
</script>